<el-dialog :close-on-click-modal="false"  :close-on-press-escape="false"  class="dialogStyleBase" :title="mixinEdit_editTitle" width="90%" :visible.sync="mixinEdit_editVisible"
    :before-close="function(){cacel('editForm')}" append-to-body>
    <div v-loading="false">
        <el-form ref="editForm" :model="form" label-width="120px" label-position="left">
            <LayoutCell>
                <LayoutCellItem title="商品信息">
                    <el-form-item label="商品图片：">
                        <imageBox :src="form.thumb" style="width: 100px;height: 100px;"></imageBox>
                    </el-form-item>
                    <el-form-item label="商品名称：">
                        {{form.name}}
                    </el-form-item>
                    <el-form-item label="商品价格/销量：">
                        <span style="display: inline-block;width: 150px;">价格：{{form.salePrice}}</span>
                        销量：{{form.orderSales}}
                    </el-form-item>
                </LayoutCellItem>

                <LayoutCellItem title="佣金设置">
                    <el-form-item label="是否参与分销">
                        <el-radio-group v-model="form.join_status">
                            <el-radio :label="true">参与</el-radio>
                            <el-radio :label="false">不参与</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="佣金规则" v-if="form.join_status == true">
                        <el-radio-group v-model="form.is_independent">
                            <el-radio :label="false">默认规则</el-radio>
                            <el-radio :label="true">单独设置</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    
                    <el-form-item v-if="form.join_status == true">
                        <!-- is_independent 是否启用独立分佣规则 -->
                        <!-- 默认规则 -->
                        <!-- 这里不能用v-if -->
                        <div v-show="form.is_independent == false">
                            <el-table v-loading="mixinTable_loading" :data="form.default_rule" border
                                style="width: 100%;" :ref="mixinPage_vueName+'TableSmall'"
                                @selection-change="mixinTable_handleSelectionChangeTableSmall">
                                <el-table-column prop="name" label="分销等级名称">
                                </el-table-column>
                                <el-table-column prop="rule.commission_1" label="一级佣金比例(%)" v-if="levelCommission >= 1">
                                </el-table-column>
                                <el-table-column prop="rule.commission_2" label="二级佣金比例(%)" v-if="levelCommission >= 2">
                                </el-table-column>
                                <el-table-column prop="rule.commission_3" label="三级佣金比例(%)" v-if="levelCommission >= 3">
                                </el-table-column>
                            </el-table>
                        </div>
                        <!-- 单独规则 -->
                        <!-- {{ $vFN.Utils.toTypeof(form.commission_rule[0].rule) }} 判断是对象还是数组 -->
                        <!-- 这里不能用v-if -->
                        <div v-show="form.is_independent == true">
                            <el-table v-loading="mixinTable_loading" :data="form.commission_rule" border
                                style="width: 100%;" :ref="mixinPage_vueName+'TableSmall'"
                                @selection-change="mixinTable_handleSelectionChangeTableSmall">
                                <el-table-column prop="name" label="商品规格" v-if="form.has_option	== true" width="100">
                                    <template slot-scope="scope">
                                        <div v-for="item in scope.row.rule" style="height: 36px;line-height: 36px;">
                                            {{item.spec.spData.textString}}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="name" label="价格" v-if="form.has_option	== true"  width="100">
                                    <template slot-scope="scope">
                                        <div v-for="item in scope.row.rule" style="height: 36px;line-height: 36px;">
                                            {{item.spec.salePrice}}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="name" label="分销等级名称" width="100">
                                </el-table-column>
                                <el-table-column label="一级佣金比例" v-if="levelCommission >= 1">
                                    <template slot="header" slot-scope="scope">
                                        一级佣金比例
                                        <el-popover
                                            placement="bottom"
                                            title="批量设置"
                                            width="300"
                                            trigger="click"
                                            v-model="visible1">
                                            <div style="display: flex;">
                                                <el-input v-model="levelValue1" clearable :disabled="levelValue2 != ''"><template slot="append">%</template></el-input>
                                                <el-input v-model="levelValue2" clearable :disabled="levelValue1 != ''"><template slot="append">元</template></el-input>
                                            </div>
                                            
                                            <div style="text-align: right; margin: 2px">
                                                <el-button size="mini" type="text" @click="visible1 = false">取消</el-button>
                                                <el-button type="primary" size="mini" @click="batch1()">确定</el-button>
                                            </div>
                                            <i slot="reference" class="el-icon-edit"></i>
                                        </el-popover>
                                    </template>
                                    <template slot-scope="scope">
                                        <div style="display: flex;" v-if="form.has_option == false">
                                            <el-input v-model="scope.row.rule.commission_1.rate" :disabled="scope.row.rule.commission_1.money != ''"><template slot="append">%</template></el-input>
                                            <el-input v-model="scope.row.rule.commission_1.money" :disabled="scope.row.rule.commission_1.rate != ''"><template slot="append">元</template></el-input>
                                        </div>
                                        <div v-if="form.has_option == true">
                                            <div v-for="item in scope.row.rule">
                                                <div style="display: flex;">
                                                    <el-input v-model="item.commission_1.rate" style="margin-bottom: 5px;" :disabled="item.commission_1.money != ''"><template slot="append">%</template></el-input>
                                                    <el-input v-model="item.commission_1.money" :disabled="item.commission_1.rate != ''"><template slot="append">元</template></el-input>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="二级佣金比例" v-if="levelCommission >= 2">
                                    <template slot="header" slot-scope="scope">
                                        一级佣金比例
                                        <el-popover
                                            placement="bottom"
                                            title="批量设置"
                                            width="300"
                                            trigger="click"
                                            v-model="visible2">
                                            <div style="display: flex;">
                                                <el-input v-model="levelValue3" clearable :disabled="levelValue4 != ''"><template slot="append">%</template></el-input>
                                                <el-input v-model="levelValue4" clearable :disabled="levelValue3 != ''"><template slot="append">元</template></el-input>
                                            </div>
                                            
                                            <div style="text-align: right; margin: 2px">
                                                <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
                                                <el-button type="primary" size="mini" @click="batch2()">确定</el-button>
                                            </div>
                                            <i slot="reference" class="el-icon-edit"></i>
                                        </el-popover>
                                    </template>
                                    <template slot-scope="scope">
                                        <div style="display: flex;" v-if="form.has_option == false">
                                            <el-input v-model="scope.row.rule.commission_2.rate" :disabled="scope.row.rule.commission_2.money != ''"><template slot="append">%</template></el-input>
                                            <el-input v-model="scope.row.rule.commission_2.money" :disabled="scope.row.rule.commission_2.rate != ''"><template slot="append">元</template></el-input>
                                        </div>
                                        <div v-if="form.has_option == true">
                                            <div v-for="item in scope.row.rule">
                                                <div style="display: flex;">
                                                    <el-input v-model="item.commission_2.rate" style="margin-bottom: 5px;" :disabled="item.commission_2.money != ''"><template slot="append">%</template></el-input>
                                                    <el-input v-model="item.commission_2.money" :disabled="item.commission_2.rate != ''"><template slot="append" >元</template></el-input>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="三级佣金比例" v-if="levelCommission >= 3">
                                    <template slot="header" slot-scope="scope">
                                        一级佣金比例
                                        <el-popover
                                            placement="bottom"
                                            title="批量设置"
                                            width="300"
                                            trigger="click"
                                            v-model="visible3">
                                            <div style="display: flex;">
                                                <el-input v-model="levelValue5" clearable :disabled="levelValue6 != ''"><template slot="append">%</template></el-input>
                                                <el-input v-model="levelValue6" clearable :disabled="levelValue5 != ''"><template slot="append">元</template></el-input>
                                            </div>
                                            
                                            <div style="text-align: right; margin: 2px">
                                                <el-button size="mini" type="text" @click="visible3 = false">取消</el-button>
                                                <el-button type="primary" size="mini" @click="batch3()">确定</el-button>
                                            </div>
                                            <i slot="reference" class="el-icon-edit"></i>
                                        </el-popover>
                                    </template>
                                    <template slot-scope="scope">
                                        <div style="display: flex;" v-if="form.has_option == false">
                                            <el-input v-model="scope.row.rule.commission_3.rate" :disabled="scope.row.rule.commission_3.money != ''"><template slot="append">%</template></el-input>
                                            <el-input v-model="scope.row.rule.commission_3.money" :disabled="scope.row.rule.commission_3.rate != ''"><template slot="append">元</template></el-input>
                                        </div>
                                        <div v-if="form.has_option == true">
                                            <div v-for="item in scope.row.rule">
                                                <div style="display: flex;">
                                                    <el-input v-model="item.commission_3.rate" style="margin-bottom: 5px;" :disabled="item.commission_3.money != ''"><template slot="append">%</template></el-input>
                                                    <el-input v-model="item.commission_3.money" :disabled="item.commission_3.rate != ''"><template slot="append">元</template></el-input>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>


                    </el-form-item>
                </LayoutCellItem>
            </LayoutCell>

        </el-form>
    </div>
    <div slot="footer">
        <el-row>
            <el-col :span="12" style="text-align: left;">
                <el-button @click="mixinEdit_resetForm('editForm')">重 置</el-button>
            </el-col>
            <el-col :span="12">
                <el-button @click="cacel('editForm')">取 消</el-button>
                <el-button type="primary" @click="sum({model:'form',ref:'editForm'})">确
                    定</el-button>
            </el-col>
        </el-row>
    </div>
</el-dialog>